import { defineComponent, ref, reactive, onMounted } from 'vue';
import { ECustomColumn, EDicType } from '@/utils/constants';
import SearchForm from '@/components/SearchForm/index';
import API from '@/services';
import PageFilter from '@/components/PageFilter/index';
import { ElFormItem } from 'element-plus';
const IndexSearchForm = defineComponent({
  name: 'IndexSearchForm',
  props: {
    search: {
      type: Function,
      default: () => ''
    }
  },
  setup(props, { slots, attrs, emit }) {
    /* form实例 */
    const formRef: any = ref();

    const state = reactive({
      userList: [] as any[],
      dataTypeList: [] as any[],
      aggregationList: [] as any[],
      statisticalPeriodList: [] as any[],
      gradeList: [] as any[],
      dimensionList: [] as any[],
      searchForm: {}
    });

    //筛选条件
    const pageFilter: any = ref([]);

    /* 指标类型 */
    const typeList = ref([
      {
        label: '原子指标',
        value: 1
      },
      {
        label: '派生指标',
        value: 2
      },
      {
        label: '衍生指标',
        value: 3
      }
    ]);
    //获取选项数据
    const getSelectData = (keys: any) => {
      switch (keys) {
        case 1:
          return {
            list: state.gradeList,
            isRemote: false
          };
        case 3:
          return {
            list: typeList.value,
            isRemote: false
          };
        case 4:
          return {
            list: state.userList,
            isRemote: true,
            remoteMethod: (name: string) => getUser(name)
          };
        case 5:
          return {
            list: state.userList,
            isRemote: true,
            remoteMethod: (name: string) => getUser(name)
          };
        case 6:
          return {
            list: state.userList,
            isRemote: true,
            remoteMethod: (name: string) => getUser(name)
          };
        case 7:
          return {
            list: state.statisticalPeriodList,
            isRemote: true,
            isMultiple: true,
            fieldLabel: 'cnName',
            fieldValue: 'id',
            remoteMethod: (name: string) => getStatisticalPeriod(name),
            onVisibleChange: (val: any) => {
              if (!val) {
                getStatisticalPeriod();
              }
            }
          };
        case 8:
          return {
            list: state.dimensionList,
            isRemote: true,
            isMultiple: true,
            fieldLabel: 'cnName',
            fieldValue: 'id',
            remoteMethod: (name: string) => getDimensionList(name),
            onVisibleChange: (val: any) => {
              if (!val) {
                getDimensionList();
              }
            }
          };
        case 9:
          return {
            list: state.dataTypeList,
            isRemote: false
          };
        case 10:
          return {
            list: state.aggregationList,
            isRemote: false
          };
        case 11:
          return {
            list: state.userList,
            isRemote: true,
            remoteMethod: (name: string) => getUser(name)
          };
        default:
          return;
      }
    };

    /* 获取用户 */
    const getUser = async (name?: string) => {
      try {
        const { code, data } = await API.userInfoService.getUser({ name });
        if (code === 200 && Array.isArray(data)) {
          state.userList = data;
        }
      } catch (error) {
        console.log(error);
      }
    };

    /* 统计粒度列表 */
    const getStatisticalPeriod = async (name?: string) => {
      try {
        const { code, data } = await API.timePeriod.getTimePeriodNameHint({
          cnName: name
        });
        if (code === 200 && Array.isArray(data)) {
          state.statisticalPeriodList = data;
        }
      } catch (error) {
        console.log(error);
      }
    };

    /* 指标等级 */
    const getGradeList = async () => {
      try {
        const { code, data } =
          await API.dictionaryConfig.getDictionaryConfigEnumTypeByEnumType({
            enumType: EDicType.grade
          });
        if (code === 200 && Array.isArray(data)) {
          state.gradeList = data;
        }
      } catch (error) {
        console.log(error);
      }
    };

    /* 默认聚合方式 */
    const getAggregationList = async () => {
      try {
        const { code, data } =
          await API.dictionaryConfig.getDictionaryConfigEnumTypeByEnumType({
            enumType: EDicType.aggregation
          });
        if (code === 200 && Array.isArray(data)) {
          state.aggregationList = data;
        }
      } catch (error) {
        console.log(error);
      }
    };

    /* 数据类型 */
    const getDataTypeList = async () => {
      try {
        const { code, data } =
          await API.dictionaryConfig.getDictionaryConfigEnumTypeByEnumType({
            enumType: EDicType.dataType
          });
        if (code === 200 && Array.isArray(data)) {
          state.dataTypeList = data;
        }
      } catch (error) {
        console.log(error);
      }
    };

    /* 获取维度下拉列表 */
    const getDimensionList = async (cnName?: string) => {
      try {
        const { code, data } = await API.dimension.getDimensionHintName({
          cnName
        });
        if (code === 200 && Array.isArray(data)) {
          state.dimensionList = data;
        }
      } catch (error) {
        console.log(error);
      }
    };

    /* 获取筛选条件 */
    const getPageFilter = async () => {
      try {
        const { code, data }: any = await API.userPageFilterSetting.getFindOne({
          pageCode: ECustomColumn?.indexmanage
        });
        if (code === 200 && data) {
          let checkedArray: any[] = data.settings.filter((v: any) => v.isCheck);
          checkedArray.sort((a, b) => a.order - b.order);
          pageFilter.value = checkedArray;

          //初始化表单对象
          pageFilter.value.map((item: any) => {
            state.searchForm[item.prop] = '';
          });
        }
      } catch (error) {
        console.log(error);
      }
    };

    onMounted(() => {
      getPageFilter();
      getGradeList();
      getStatisticalPeriod();
      getUser();
      getDataTypeList();
      getAggregationList();
      getDimensionList();
    });
    return () => {
      const { search } = props;
      return (
        <SearchForm
          num={3}
          isSearchBtn={false}
          onReset={() => {
            formRef.value.resetFields();
            //清空表单
            Object.keys(state.searchForm).forEach((key) => {
              state.searchForm[key] = '';
            });
            search();
          }}
          onSearch={() => search(state.searchForm)}
          model={state.searchForm}
          formRef={formRef}
          v-slots={{
            pageFilter: () => (
              <>
                {pageFilter.value.map((item: any) => {
                  return (
                    <ElFormItem
                      labelWidth={120}
                      label={item.label + ':'}
                      prop={item.prop}
                    >
                      <PageFilter
                        searchForm={state.searchForm}
                        pageSettings={item}
                        selectData={getSelectData(item.keys)}
                        onSearchForm={() => {
                          props.search(state.searchForm);
                        }}
                      ></PageFilter>
                    </ElFormItem>
                  );
                })}
              </>
            )
          }}
        ></SearchForm>
      );
    };
  }
});
export default IndexSearchForm;
